<template>
  <div class="main app-container">
    <div class="main-container">
      <div class="cbox">
        <el-form class="form" :model="flt" label-width="8rem" ref="fltForm">
          <el-row :gutter="12" class="row">
            <el-col :span="5">
              <el-form-item size="mini" label="派车中心代码：" prop="dptCode" label-width="120px">
                <el-input clearable maxlength="20" v-model="flt.dptCode" size="mini" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item size="mini" label="派车中心名称：" prop="dptName" label-width="120px">
                <el-select v-model="flt.dptName" clearable style="width: 100%">
                 <el-option
                   v-for="(item,index) in alldptList"
                   :key="index"
                   :label="item.dptName"
                   :value="item.dptName">
                 </el-option>
               </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item size="mini" label-width="10px">
                <el-button size="mini" type="primary" @click="searchList">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10" class="row">
            <el-col :span="24">
              <el-form-item size="mini" label-width="0px">
                <el-button size="mini" type="primary" plain @click="addNew">新增</el-button>
                <el-button size="mini" type="primary" plain @click="edit">编辑</el-button>
                <el-button size="mini" type="primary" plain @click="del">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table">
        <div class="inner" ref="inner">
          <el-table :height="maxHeight" style="width: 100%" :data="departmentList" :highlight-current-row="true" @row-click="rowClick" border :header-cell-style="{
              textAlign: 'center'
            }"
            @row-dblclick="view">
            <el-table-column align="center" width="60" label="序号" :index="indexMethod" type="index"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="派车中心代码" prop="dptCode"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="派车中心名称" prop="dptName"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="用户人数" prop="userCount"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="查看用户" prop="userCount">
              <template slot-scope="scope">
              <el-button v-if="scope.row.userCount != 0" size="mini" type="primary" plain @click="see(scope.row)">查看</el-button>
               </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination
        class="pagination"
        small
        background
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.pageSize"
        :layout="Pagination.layout"
        :total="Pagination.total">
      </el-pagination>
      <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="showDialog"
        :visible.sync="showDialog"
        :title="operate">
        <v-dialog
          :dialogmode="operate"
          :disabled="!isEditMode"
          @close="closeEdit"
          @save="saveFltInfo"
          :flt_info="currentFltInfo">
        </v-dialog>
      </el-dialog>

      <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="showSeeDialog"
        :visible.sync="showSeeDialog"
        :title="operate">
        <s-dialog
          :disabled="!isEditMode1"
          @close="closeEdit"
          @save="saveFltInfo"
          :flt_info="currentFltInfo"
          :userdata="usersData"
          >
        </s-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import VDialog from './dialog';
import SDialog from './seedialog';
import resizeMixin from '@/mixins/resize';
import paginationMixin from '@/mixins/pagination';

import {
  checksysdepartmentList,
  addsysdepartmentList,
  editsysdepartment,
  delsysdepartment,
  checkusersList,
  checkAllSysDepartment
} from '@/request/api';

export default {
  name: 'router.sysdepartment',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      flt: {
        dptCode: '',
        dptName: ''
      },

      departmentList: [],

      // 查看用户
      usersData: [],
      // 派车中心下拉
      alldptList: [],

      isEditMode: true,
      operate: '',
      showDialog: false,
      showSeeDialog: false,

      currentRow: {},
      currentFltInfo: {},

      roleStatus: [],
      rules: {
        dptCode: [
          { min: 0, max: 20, message: '输入至多20个字符', trigger: 'blur' }
        ],
        dptName: [
          { min: 0, max: 37, message: '至多输入37个字符', trigger: 'blur' }
        ]
      },
      maxHeight: -1
    };
  },
  methods: {

    // 重写的获取列表数据的方法
    getList(currentPage, pageSize, updateTotal) {
      this.clearState()
      checksysdepartmentList({
        dptCode: this.flt.dptCode,
        dptName: this.flt.dptName,
        PageIndexs: this.Pagination.currentPage,
        PageSizes: this.Pagination.pageSize
      }).then(res => {
        // console.log(res,222222222222)
        this.departmentList = res.data.FTKJWLHYPT
        updateTotal(res.data.total.FTKJWLHYPT)
      })
    },
    addNew() {
      this.operate = this.DIALOG_MODE.ADD;
      this.isEditMode = true;
      this.currentFltInfo = {};
      this.showDialog = true;
    },
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      this.operate = this.DIALOG_MODE.EDIT;
      this.isEditMode = true;
      this.currentFltInfo = Object.assign({}, this.currentRow);
      this.showDialog = true
    },
    view (row) {
      this.operate = this.DIALOG_MODE.VIEW;
      this.isEditMode = false;
      this.currentFltInfo = Object.assign({}, row);
      this.showDialog = true
    },
    // 查看用户dialog
    see (row) {
      this.operate = this.DIALOG_MODE.SEE;
      this.isEditMode1 = true;
      this.showSeeDialog = true
      this.showDialog = false
      checkusersList({ dptId: row.dptId}).then(res => {
        this.usersData = res.data.FTKJWLHYPT
        // console.log(this.usersData)
      })
    },
    closeEdit() {
      this.showDialog = false,
      this.showSeeDialog = false
    },

    saveFltInfo(info) {
      switch(this.operate) {
      case this.DIALOG_MODE.ADD:
        addsysdepartmentList(info).then(() => {
          this.$message({
            message: '新增成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      case this.DIALOG_MODE.EDIT:
        editsysdepartment(info).then(() => {
          this.$message({
            message: '编辑成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      default:
        break
      }
    },
    rowClick(row) { this.currentRow = row },
    del() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      this.$confirm('您确认要删除选定的数据吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        let leta = {};
        leta['dptId'] = this.currentRow.dptId;
        leta['version'] = this.currentRow.version;
        delsysdepartment(leta).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            showClose: true
          })
          this.refreshList()
        })
      });
    },
    clearState() {
      this.currentRow = {};
      this.currentFltInfo = {};
    },
    //查看用户信息
    getUserInfo() {

    },
    // 派车中心下拉
    getAlldpt() {
      checkAllSysDepartment().then(res => {
        this.alldptList = res.data.FTKJWLHYPT
        // console.log(this.alldptList)
      })
    }
  },
  components: {
    VDialog,
    SDialog
  },
  mounted() {
    this.searchList()
  },
  created() {
    this.getAlldpt()
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight;
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  position: relative;
  width: 100%;
}
.main-container {
  height: 100%;
  width: 100%;
  position: relative;
  // padding: 0 12px;
  display: flex;
  flex-direction: column;
  .form {
    width: 100%;
    flex: 0 0 auto;
    .row {
      width: 100%;
      // margin: 10px 0;
      margin-bottom: 0;
    }
  }
  .table {
    flex: 1;
    overflow: hidden;
    position: relative;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
